<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>组织架构</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link to="/staff/StaffIndex">员工管理</nuxt-link></a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link :to="`/staff/StaffSave/${id}`">{{ id && id>0 && '员工编辑' || '新增员工' }}</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card class="s-card">
      <div class="filter">
        <a-form
          :form="form"
          layout="inline"
        >
          <h2>填写基本信息</h2>
          <a-row>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="员工姓名" class="label-width-auto" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'name',
                    { rules: [{ required: true, message: '请输入员工姓名' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="工号" class="label-width-auto" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'jobNumber',
                    { rules: [{ required: true, message: '请输入工号' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="部门" class="label-width-auto" v-bind="formItemLayout">
                <a-select
                  v-decorator="[ 'departmentId', {
                    rules: [{ required: true, message: '请选择一个部门' }]
                  }]"
                  placeholder="请选择"
                  @change="handleChange"
                >
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>

                </a-select>

              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="性别" class="label-width-auto" v-bind="formItemLayout">
                <a-select
                  v-decorator="[ 'sex', {
                    rules: [{ required: true, message: '请选择性别' }]
                  }]"
                  placeholder="请选择"
                >
                  <a-select-option value="男">男</a-select-option>
                  <a-select-option value="女">女</a-select-option>
                  <a-select-option value="保密">保密</a-select-option>
                </a-select>

              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="手机" class="label-width-auto" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'phone',
                    { rules: [{ required: true, message: '请输入手机' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="入职日期" class="label-width-auto" v-bind="formItemLayout">
                <a-week-picker
                  v-decorator="[
                    'joinedDate',
                    {},
                  ]"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  :allow-clear="true"
                />

              </a-form-item>
            </a-col>

          </a-row>
          <a-row>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="职务" class="label-width-auto" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'post',
                    { rules: [{ required: true, message: '请输入职务' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="部门上级" class="label-width-auto" v-bind="formItemLayout">

                <a-select v-decorator="[ 'isBoss', {'initialValue':0}]" placeholder="请选择">
                  <a-select-option
                    v-for="item in isOrNotList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

          </a-row>
          <br>
          <h2>工资基础部分</h2>
          <h3 v-if="formArr.length === 0">暂无</h3>
          <div v-for="(t,i) in formArr" :key="i">
            <a-row>
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :label="t.group" class="label-width-auto" v-bind="formItemLayout">
                  <a-list
                    :grid="{ gutter: 24, lg: 3, md: 2, sm: 1 }"
                    :data-source="t.details"
                  >
                    <a-list-item slot="renderItem" slot-scope="item, index">
                      <a-card :title="item.name">
                        <a-input
                          v-model="formArr[i].details[index].value"
                          placeholder="请输入"
                        />

                      </a-card>
                    </a-list-item>
                  </a-list>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div class="btn-container">
        <a-row>
          <a-col :span="10" :offset="10">
            <a-button @click="dialogClosed()">取消</a-button>
            <a-button id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</a-button>
          </a-col>
        </a-row>
      </div>
    </a-card>

  </page-view>
</template>
<style lang="less" scoped>
  /deep/ .ant-form-item-label{
    width:100px!important;
  }
  /deep/ .ant-form-item-children .ant-list{
    width:100%;
  }
</style>
<script>
import { STable, PageView } from '@/components'
import { edit, get, getSalary } from '@/pages/staff/api/staff'
import moment from 'moment'
export default {
  name: 'StaffSave',
  inject: ['formItemLayout'],
  components: {
    STable,
    PageView
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      submitButton: {
        text: '提交',
        status: false
      },
      departmentList: [],
      isOrNotList: [{ id: 0, name: '否' }, { id: 1, name: '是' }],
      formArr: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.form = this.$form.createForm(this)
      this.$initForm(this.form, {}, { joinedDate: date => moment(date) })
      this.initFormArr([])
      this.$nextTick(() => {
        // 获取编辑数据
        if (this.id && this.id > 0) {
          this.$ajaxSend(get, this.id, {
            success: (datas) => {
              this.initFormArr(datas.staffSalary.details)
              this.$initForm(this.form, datas, { joinedDate: date => moment(date) })
            }
          })
        }
        this.$departmentListFunc().then(data => {
          this.departmentList = data
        })
      })
    },
    initFormArr (datas) {
      const changeArr = []
      datas.forEach(data => {
        const exist = changeArr.some((item) => {
          if (item.group === data.groupName) {
            item.details.push(data)
          }
          return item.group === data.groupName
        })
        if (!exist) {
          changeArr.push({ group: data.groupName, remark: data.details, details: Array.of(data) })
        }
      })

      this.formArr = changeArr
    },
    refreshDataList () {
      this.dialogClosed()
    },
    dialogClosed () {
      this.$router.go(-1)
    },
    // 表单提交
    dataFormSubmit () {
      this.$saveQuit('form', edit(this.id - 0), (data) => {
        data.id = this.id && this.id - 0 > 0 && this.id - 0 || null
        data.staffSalary = {}
        data.staffSalary.details = []
        this.formArr.forEach(item => {
          data.staffSalary.details.push.apply(data.staffSalary.details, item.details)
        })
        return data
      })
    },
    handleChange (value) {
      this.$ajaxSend(getSalary, value, {
        success: datas => this.initFormArr(datas)
      })
    }

  }
}
</script>
